
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>网站用户</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../static/layuiadmin/layui/css/layui.css" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
  <link rel="stylesheet" href="../../../static/layuiadmin/style/admin.css" th:href="@{/layuiadmin/style/admin.css}" media="all">
  <style>
    .layui-form-label{
      text-align: left!important;
      width: auto;!important;
    }
    .layui-input-block {
      margin-left: 58px!important;
    }
  </style>
</head>
<body>
<div class="layui-fluid">
  <div class="layui-card">
      <div class="demoTable">
        用户名：
        <div class="layui-inline">
          <input class="layui-input" name="id" id="demoReload" autocomplete="off" placeholder="用户名">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="layui-btn" data-type="add"><i class="layui-icon">&#xe608;</i> 添加一个用户</button>
      </div>
      <table class="layui-hide" id="test" lay-filter="test"></table>
      <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
      </script>
  </div>
</div>
</body>
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="templateForm" style="padding: 20px 0 0 0;display: none;">
  <form class="layui-form" action="" style="margin-top: 10px;margin-right: 0;margin-left: 5px;" lay-filter="formValue" id="formValue">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-inline">
        <input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="username">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">密码</label>
      <div class="layui-input-inline">
        <input type="text" name="password" lay-verify="phone" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">邮箱</label>
      <div class="layui-input-inline">
        <input type="text" name="email" lay-verify="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input" id="email">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">头像</label>
      <div class="layui-input-inline">
        <input type="text" name="headPhoto" lay-verify="required" placeholder="请上传图片" autocomplete="off" class="layui-input" id="headPhoto">
      </div>
      <button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-useradmin">上传图片</button>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <select name="sex" lay-verify="required" id="sex">
          <option value="1" >男</option>
          <option value="0">女</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">注册时间</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="time" placeholder="yyyy-MM-dd HH:mm:ss" name="time">
        </div>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">爱好</label>
      <div class="layui-input-block">
        <textarea name="hobby" placeholder="请输入内容" class="layui-textarea" id="hobby"></textarea>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">介绍自己</label>
      <div class="layui-input-block">
        <textarea name="selfIntroduce" placeholder="请输入内容" class="layui-textarea" id="selfIntroduce"></textarea>
      </div>
    </div>
    <div class="layui-form-item layui-form-text">
      <label class="layui-form-label">其他</label>
      <div class="layui-input-block">
        <textarea name="other" placeholder="请输入内容" class="layui-textarea" id="other"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>
<script src="../../../static/layuiadmin/layui/layui.js" th:src="@{/layuiadmin/layui/layui.js}"></script>
<script>
  layui.config({
    base: '/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'useradmin', 'table','upload','form','laydate'], function() {
    var $ = layui.$;
    var form = layui.form;
    var table = layui.table;
    var upload = layui.upload;
    var laydate = layui.laydate;
    //常规用法
    laydate.render({
      elem: '#time'
      ,type: 'datetime'
    });
    //上传头像
    upload.render({
      elem: '#layuiadmin-upload-useradmin'
      ,url: layui.setter.base + 'json/upload/demo.js'
      ,accept: 'images'
      ,method: 'get'
      ,acceptMime: 'image/*'
      ,done: function(res){
        $(this.item).prev("div").children("input").val(res.data.src)
      }
    });
    table.render({
      elem: '#test'
      ,url:'user/getUsers'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print']
      ,title: '用户数据表'
      ,cellMinWidth: 100
      ,cols: [
        [
          {type: 'checkbox', fixed: 'left'}
          ,{field:'id', title:'ID', unresize: true, sort: true, align: 'center'}
          ,{field:'username', title:'用户名', unresize: true, align: 'center'}
          ,{field:'headPhoto', title:'头像', unresize: true, align: 'center'}
          ,{field:'email', title:'邮箱', unresize: true, align: 'center'}
          ,{field:'password', title:'密码', unresize: true, align: 'center'}
          ,{field:'sex', title:'性别', unresize: true, sort: true, align: 'center', template: function (data) {
            if(data.sex === 1){
              return '男';
            }else {
              return '女';
            }
          }}
          ,{field:'time', title:'注册时间', unresize: true, sort: true, align: 'center'}
          ,{field:'hobby', title:'爱好', unresize: true, align: 'center'}
          ,{field:'selfIntroduce', title:'自我介绍', unresize: true, align: 'center'}
          ,{field:'other', title:'其他', unresize: true, align: 'center'}
          ,{title:'操作', toolbar: '#barDemo',width:180}
        ]
      ]
      ,page: true
      ,limits:[20,30,50,100]
      ,limit:15
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if(obj.event === 'del'){
        layer.confirm('真的删除 '+data.username+' 用户么', function(index){
          obj.del();
          $.ajax({
            url: "user/deleteUser/"+data.username,
            method: 'POST',
            cache: false,
            success: function (status) {
              if(status === 'SUCCESS'){
                //console.log(data)
                layer.close(index);
                table.reload('test',{//重载表格
                  page:{
                    curr:1
                  }
                })
              }else {
                layer.alert("删除失败")
              }
            }
          });
        });
      } else if(obj.event === 'edit'){

        var index = layer.open({
          type: 1 //Page层类型
          ,skin: 'layui-layer-molv'
          ,title: ['编辑用户信息','font-size:18px;text-align:center;font-weight:bolder;']
          ,shadeClose: true
          ,maxmin: true //允许全屏最小化
          ,area: ['340px', '500px']
          ,btn:["提交","取消"]
          ,fix: false
          ,shade: 0.4//遮罩透明度
          ,content: $('#templateForm')
          ,success:function(index, layero){
            $('#username').val(data.username);
            $('#password').val(data.password);
            $('#email').val(data.email);
            //给select标签赋值
            var select = 'dd[lay-value=' + data.sex + ']';
            $('#sex').siblings("div.layui-form-select").find('dl').find(select).click();
            $('#headPhoto').val(data.headPhoto);
            $('#hobby').val(data.hobby);
            $('#selfIntroduce').val(data.selfIntroduce);
            $('#other').val(data.other);
            $('#time').val(data.time);
          }
          ,yes:function (index, layero) {
            //var formData = {};
            var data1 = $('#formValue').serializeArray();
            //$.each(t, function() {
              //formData[this.name] = this.value;
            //});
            //console.log(JSON.stringify(formData));
            //var data1 = JSON.stringify(formData);
            //var data1 = form.val("#formValue");
            //console.log(data1);
            //异步提交
            $.ajax({
              url: "user/updateUser/"+data.id+"/"+data.username,
              method: 'POST',
              data: data1,
              cache: false,
              success: function (status) {
                if(status === 'SUCCESS'){
                  //console.log(data)
                  var sex = data1[4].value?'男':'女';
                  layer.alert("用户名为 "+data1[0].value+" 的用户修改成功，修改后数据为{姓名："+data1[0].value+"，邮箱："+data1[1].value+"，密码："+data1[2].value+"，性别："+sex+"，注册时间："+data1[5].value+"，爱好："+data1[6].value+"，自我介绍"+data1[7].value+"，其他："+data1[8].value+"}");
                  layer.close(index);//关闭弹出层
                  $("#formValue")[0].reset();//重置form
                  table.reload('test',{//重载表格
                    page:{
                      curr:1
                    }
                  })
                }else if (status === 'exist') {
                  layer.alert("该用户已存在")
                }else {
                  layer.alert("修改失败")
                }
              }
            });
          }
          ,btn2: function(index, layero){
            layer.close(index);//关闭弹出层
            $("#formValue")[0].reset()//重置form
          }
        });
      }else if (obj.event === 'detail'){
        var sex = data.sex?'男':'女';
        layer.alert("用户名为 "+data.username+" 的用户修改成功，修改后数据为{用户名："+data.username+"，邮箱："+data.email+"，密码："+data.password+"，性别："+sex+"，注册时间："+data.time+"，爱好："+data.hobby+"，自我介绍"+data.selfIntroduce+"，其他："+data.other+"}");
      }
    });
    var $ = layui.$, active = {
      reload: function(){
        var demoReload = $('#demoReload');

        //执行重载
        table.reload('test', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            searchContent: demoReload.val()
          }
        }, 'data');
      },
      add:function () {
        $("#formValue")[0].reset();//重置form
        var index = layer.open({
          type: 1 //Page层类型
          ,skin: 'layui-layer-molv'
          ,title: ['添加一个用户','font-size:18px;text-align:center;font-weight:bolder;']
          ,shadeClose: true
          ,maxmin: false //允许全屏最小化
          ,area: ['340px', '500px']
          ,btn:["提交","取消"]
          ,fix: false
          ,shade: 0.4//遮罩透明度
          ,content: $('#templateForm')
          ,yes:function (index, layero) {
            var data = $("#formValue").serializeArray();
            //var data1 = form.val("formValue");
            //异步提交
            $.ajax({
              url: "user/addUser",
              method: 'POST',
              data: data,
              cache: false,
              success: function (status) {
                if(status === 'SUCCESS'){
                  var sex = data[4].value?'男':'女';
                  layer.alert("用户名为 "+data[0].value+" 的用户修改成功，修改后数据为{姓名："+data[0].value+"，邮箱："+data[1].value+"，密码："+data[2].value+"，性别："+sex+"，注册时间："+data[5].value+"，爱好："+data[6].value+"，自我介绍"+data[7].value+"，其他："+data[8].value+"}");
                  layer.close(index);//关闭弹出层
                  $("#formValue")[0].reset();
                  //重置form
                  table.reload('test',{//重载表格
                    page:{
                      curr:1
                    }
                  })
                }else if (status === 'exist') {
                  layer.alert("该用户已存在")
                }else {
                  layer.alert("添加失败")
                }
              }
            });
          }
          ,btn2: function(index, layero){
            layer.close(index);//关闭弹出层
            $("#formValue")[0].reset();//重置form
          }
        });
      }
    };

    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
</script>
</html>
